<script setup lang="ts">
import { ref, reactive } from "vue";
import { Ref } from "vue";
import { useHomeStore } from "@/stores/home/home";
import { ArrowLeft, ArrowRight, Sunny, Moon } from "@element-plus/icons-vue";

const homeStore = useHomeStore();
const router = useRouter();

const THEMELIGHT: string = "light";
const THEMEDARK: string = "dark";

const theme: Ref<string> = ref(THEMELIGHT);
function themeChange(type: string) {
  theme.value = type;
  document.getElementsByTagName("html")[0].className = type;
}
</script>

<template>
  <div class="home-header">
    <div class="search">
      <el-space :size="15">
        <el-icon :size="18" @click="router.back()">
          <ArrowLeft />
        </el-icon>
        <el-icon :size="18" @click="router.go(1)">
          <ArrowRight />
        </el-icon>
      </el-space>
      <search></search>
    </div>
    <div class="tool">
      <el-space :size="20">
        <div class="light-dark">
          <el-tooltip
            effect="dark"
            content="暗黑模式"
            placement="bottom"
            v-if="theme === THEMELIGHT"
          >
            <el-icon :size="19" @click="themeChange(THEMEDARK)">
              <Moon />
            </el-icon>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="高亮模式"
            placement="bottom"
            v-if="theme === THEMEDARK"
          >
            <el-icon :size="18" @click="themeChange(THEMELIGHT)">
              <Sunny />
            </el-icon>
          </el-tooltip>
        </div>
      </el-space>

      <div class="user" @click="homeStore.setLoginDialog(true)">
        <el-space :size="10">
          <div>哦</div>
        </el-space>
        <el-avatar shape="square" :size="35" src="@/assets/vue.svg" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;

  .search {
    display: flex;
  }

  .tool {
    position: relative;
    display: flex;
    align-items: center;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: var(--el-font-size-base);

    .user {
      cursor: pointer;
    }

    .light-dark {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-icon {
        animation: iconchange 0.5s ease;
      }
    }
  }
}

.el-icon {
  cursor: pointer;

  &:hover {
    color: var(--el-color-primary);
  }
}

@keyframes iconchange {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
